<template>
  <div class="product">
    <van-sticky>
      <van-nav-bar title="文章详细页面" left-arrow @click-left='backOff' />
    </van-sticky>
    <van-row>
      <van-col span='24' style='background-color: #fff'>
        <!-- 图片 -->
        <img src="https://img01.yzcdn.cn/vant/ipad.jpeg" alt="暂无图片">
        <!-- 标题 -->
        <h2>
          {{article.title}}
        </h2>
        <!-- 作者 -->
        <div>作者: {{article.author}}</div>
        <!-- 标签 -->
        <div>标签: {{article.cid}}</div>
        <!-- 阅读量 -->
        <div>阅读量: {{article.views}}</div>
        <!-- 简介 -->
        <div>简介: {{article.synopsis}}</div>
        <!-- 内容 -->
        <div>内容: {{article.isPay == 1 ? '请购买后观看' : article.content}}</div>
        <!-- 创建时间 -->
        <div>创建时间: {{article.created_at}}</div>
        排版暂时就这样了
      </van-col>
    </van-row>
    <template v-if='article.isPay == 1 ? true : false'>
      <van-goods-action style='margin-bottom: 46px'>
        <van-goods-action-icon icon="chat-o" text="客服" />
        <van-goods-action-icon icon="cart-o" text="购物车" />
        <van-goods-action-button color="#be99ff" type="warning" text="加入购物车" />
        <van-goods-action-button color="#7232dd" type="danger" text="立即购买" />
      </van-goods-action>
    </template>
  </div>
</template>

<script>
import { request } from 'network/request'

export default {
  name: 'Product',
  // 获取对应的文章数据
  created() {
    request({
      url: 'article/getArtItem',
      method: 'get',
      params: {
        id: this.$route.params.id
      }
    }).then((res) => {
      this.article = res.data
    }).catch(err => {
      console.log(err)
    })
  },
  data() {
    return {
      article: {}
    }
  },
  methods: {
    backOff() {
      this.$router.go(-1)
    },
  }
}
</script>

<style lang='scss' scoped>
/* @import url(); 引入css类 */
.product {
  margin-bottom: 60px;
  img {
    width: 100vw;
    height: 100vw;
  }
}
</style>
